
<%@ page contentType="text/html;utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="ot" uri="http://www.ideyatech.com/tides"%>
<%@ taglib prefix="idy" tagdir="/WEB-INF/tags"%>

<idy:header title_webpage="label.receipt">
  <script src="${url_yui}/yahoo-dom-event/yahoo-dom-event.js"></script>
  <script src="${url_yui}/animation/animation-min.js"></script>
  <script src="${url_yui}/connection/connection-min.js"></script>
  <script src="${url_context}/script/ideyatech-${ot_version}/crud.js"></script>
  <script src="${url_context}/script/jquery-1.7.2-min.js"></script>
  <script src="${url_context}/script/jquery-ui-1.8.22.custom.min.js"></script>
  <link rel="stylesheet" href="${url_context}/script/jquery-ui-1.8.22.custom.css">
</idy:header>
    <!-- BODY -->
    <div id="bd">
        <div class="yui-g">
        <div class="main">

            <div class="title-wrapper">
                <div class="title"><span><spring:message code="label.receipt" /></span></div>
            </div>
            
            <div class="errormsg" ></div>
	
			<div class='fieldsBox'>
				<p><label class="lbl">Employee ID: </label><input type="text" class="employeeID" name="employeeID"/><sup class="required">*</sup></p>
				<p><label class="lbl">First Name: </label><input type="text" class="fname" name="fname"/></p>
				<p><label class="lbl">Middle Name: </label><input type="text" class="mname" name="mname"/></p>
				<p><label class="lbl">Last Name: </label><input type="text" class="lname" name="lname"/></p>
				
				<div class="requiredInfo">
					<sup class="required">*</sup> Indicates required field.
				</div>
			</div>
			
			<div class="errormsg"></div>
			
			<div class="fieldsBox">
				<ul class="noStyle" id="receiptList">
				<li class="listTemplate"><div class="receiptInfo">
					<div class="establishmentDetails">
						<div>SUPPLIER'S REGISTERED NAME (*if Sole Proprietor, indicate name of Proprietor)</div>
						<div><input type="text" class="supplier" name="supplier" style="width: 460px;"/></div>
					</div>
					<div>
						<div>TIN</div>
						<input type="text" id="tin" name="tin" class="tin"/>
					</div>
					<div class="establishmentDetails">
						<div>Address (omit comma and period)</div>
						<div><input type="text" class="address" name="address" style="width: 460px;"/></div>
					</div>
					<div>
						<div>Municipality</div>
						<input type="text" class="municipality" name="municipality"/>
					</div>
					<div class="receiptDetails">
						<div>Date of Purchase</div>
						<input type="text" class="datePurchase" name="datePurchase"/>
					</div>
					<div class="receiptDetails">
						<div>Gross Purchase</div>
						<input type="text" class="grossPurchase" name="grossPurchase"/>
					</div>
					<div class="receiptDetails">
						<div>Net Purchase</div>
						<input type="text" class="netPurchase" name="netPurchase" readonly="readonly"/>
					</div>
					<div class="receiptDetails">
						<div>VAT Input</div>
						<input type="text" class="vat" name="vat" readonly="readonly"/>
					</div>
					<div class="clear"></div>
					<div class="btn">
						<input type="button" class="removeReceipt" name="removeReceipt" value="Remove Receipt">
						<input type="button" class="saveReceipt" name="saveReceipt" value="Save Receipt">
					</div>
				</div></li>
				<li><div class="receiptInfo">
					<div class="establishmentDetails">
						<div>SUPPLIER'S REGISTERED NAME (*if Sole Proprietor, indicate name of Proprietor)</div>
						<div><input type="text" class="supplier" name="supplier" style="width: 460px;"/></div>
					</div>
					<div>
						<div>TIN</div>
						<input type="text" class="tin" name="tin"/>
					</div>
					<div class="establishmentDetails">
						<div>Address (omit comma and period)</div>
						<div><input type="text" class="address" name="address" style="width: 460px;"/></div>
					</div>
					<div>
						<div>Municipality</div>
						<input type="text" class="municipality" name="municipality"/>
					</div>
					<div class="receiptDetails">
						<div>Date of Purchase</div>
						<input type="text" class="datePurchase" name="datePurchase"/>
					</div>
					<div class="receiptDetails">
						<div>Gross Purchase</div>
						<input type="text" class="grossPurchase" name="grossPurchase"/>
					</div>
					<div class="receiptDetails">
						<div>Net Purchase</div>
						<input type="text" class="netPurchase" name="netPurchase" readonly="readonly"/>
					</div>
					<div class="receiptDetails">
						<div>VAT Input</div>
						<input type="text" class="vat" name="vat" readonly="readonly"/>
					</div>
					<div class="clear"></div>
					<div class="btn">
						<input type="button" class="removeReceipt" name="removeReceipt" value="Remove Receipt">
						<input type="button" class="saveReceipt" name="saveReceipt" value="Save Receipt">
					</div>
				</div></li>
				</ul>
				
				<div>
					<input type="button" class="addReceipt" name="addReceipt" value="Add Receipt">
					<input type="button" class="exporttocsv" name="exporttocsv" value="Export to CSV">
				</div>
			</div>

			<!-- div class="contents">
  				<hr class="broad"/>
            	<table class="admin-table">
            		<thead>
            		<tr>
						<th><ot:header_sort headerField="grossPurchase" headerLabel="label.receipt.grossPurchase" prefix="${ receipt }" searchFormId="receiptSearch"/></th>
						<th><ot:header_sort headerField="dateOfPurchase" headerLabel="label.receipt.dateOfPurchase" prefix="${ receipt }" searchFormId="receiptSearch"/></th>
            			<th>&nbsp;</th>
            		</tr>
            		</thead>
            		<tbody id="receipt-table-results">
            		<c:forEach items="${results.results}" var="record" varStatus="status">
            		<tr id="receipt-row-${ record.id }" class="row-style-${ status.count % 2 }">
						<td><c:out value="${ record.grossPurchase }" /></td>
						<td><fmt:formatDate value="${ record.dateOfPurchase }" dateStyle="short" type="DATE" pattern="MM/dd/yyyy" /></td>
                  		<td>
							<ot:update_button id="${record.id}" page="receipt.jspx" prefix="receipt"/>
                    		<ot:delete_button id="${record.id}" page="receipt.jspx" title="" prefix="receipt"/>                  		
                  		</td>	
            		</tr>

            		</c:forEach>
            		</tbody>
            		<tr id="receipt-row-new">
						<td colspan="3">
            			</td>
            		</tr>
            	</table>
            	<ot:add_button page="receipt.jspx" prefix="receipt"/>
            	<ot:paging results="${ results }" baseURL="receipt.jspx" pageParamName="page" displaySummary="false" displayPageLinks="true" />	            	
        	</div-->
        </div>
        </div>    
    </div>
    <!-- END OF BODY -->
<!-- FOOT -->
<idy:footer >
	<script src="${url_context}/script/addReceipt.js"></script>
</idy:footer> 